<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">

<title>Slider Pro</title>

<link rel="stylesheet" type="text/css" href="../dist/css/slider-pro.min.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="css/examples.css" media="screen"/>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.2.min.js"></script>
<script type="text/javascript" src="../dist/js/jquery.sliderPro.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>

<script type="text/javascript">
	$( document ).ready(function( $ ) {
		$( '#example2' ).sliderPro({
			width: 500,
			height: 300,
			autoplay: false,
			visibleSize: '100%',
			forceSize: 'fullWidth',
			autoSlideSize: true
		});



		// instantiate fancybox when a link is clicked
		$( ".slider-pro" ).each(function(){
			var slider = $( this );

			slider.find( ".sp-image" ).parent( "a" ).on( "click", function( event ) {
				event.preventDefault();
			
				if ( slider.hasClass( "sp-swiping" ) === false ) {
					var sliderInstance = slider.data( "sliderPro" ),
						isAutoplay = sliderInstance.settings.autoplay;

					$.fancybox.open( slider.find( ".sp-image" ).parent( "a" ), {
						index: $( this ).parents( ".sp-slide" ).index(),
						afterShow: function() {
							if ( isAutoplay === true ) {
								sliderInstance.settings.autoplay = false;
								sliderInstance.stopAutoplay();
							}
						},
						afterClose: function() {
							if ( isAutoplay === true ) {
								sliderInstance.settings.autoplay = true;
								sliderInstance.startAutoplay();
							}
						}
							
					});
				}
			});
		});

		
	});
</script>


</head>

<body>

	<div id="example2" class="slider-pro">
		<div class="sp-slides">
			<div class="sp-slide">
				<a href="https://bqworks.net/slider-pro/images2/image1_large.jpg">
					<img class="sp-image" src="../src/css/images/blank.gif" 
						data-src="https://bqworks.net/slider-pro/images2/image1_medium.jpg" 
						data-retina="https://bqworks.net/slider-pro/images2/image1_large.jpg"/>
				</a>
				<p class="sp-caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
			</div>

	        <div class="sp-slide">
				<a href="https://bqworks.net/slider-pro/images2/image2_large.jpg">
	        		<img class="sp-image" src="../src/css/images/blank.gif" 
	        			data-src="https://bqworks.net/slider-pro/images2/image2_medium.jpg" 
	        			data-retina="https://bqworks.net/slider-pro/images2/image2_large.jpg"/>
	        	</a>
	        	<p class="sp-caption">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
			</div>

			<div class="sp-slide">
				<a href="https://bqworks.net/slider-pro/images2/image3_large.jpg">
					<img class="sp-image" src="../src/css/images/blank.gif" 
						data-src="https://bqworks.net/slider-pro/images2/image3_medium.jpg" 
						data-retina="https://bqworks.net/slider-pro/images2/image3_large.jpg"/>
				</a>
				<p class="sp-caption">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
			</div>

			<div class="sp-slide">
				<a href="https://bqworks.net/slider-pro/images2/image4_large.jpg">
					<img class="sp-image" src="../src/css/images/blank.gif" 
						data-src="https://bqworks.net/slider-pro/images2/image4_medium.jpg" 
						data-retina="https://bqworks.net/slider-pro/images2/image4_large.jpg"/>
				</a>
				<p class="sp-caption">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
			</div>

			<div class="sp-slide">
				<a href="https://bqworks.net/slider-pro/images2/image5_large.jpg">
					<img class="sp-image" src="../src/css/images/blank.gif" 
						data-src="https://bqworks.net/slider-pro/images2/image5_medium.jpg" 
						data-retina="https://bqworks.net/slider-pro/images2/image5_large.jpg"/>
				</a>
				<p class="sp-caption">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div>

			<div class="sp-slide">
				<a href="https://bqworks.net/slider-pro/images2/image6_large.jpg">
					<img class="sp-image" src="../src/css/images/blank.gif" 
						data-src="https://bqworks.net/slider-pro/images2/image6_medium.jpg" 
						data-retina="https://bqworks.net/slider-pro/images2/image6_large.jpg"/>
				</a>
				<p class="sp-caption">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
			</div>

			<div class="sp-slide">
				<a href="https://bqworks.net/slider-pro/images2/image7_large.jpg">
					<img class="sp-image" src="../src/css/images/blank.gif" 
						data-src="https://bqworks.net/slider-pro/images2/image7_medium.jpg" 
						data-retina="https://bqworks.net/slider-pro/images2/image7_large.jpg"/>
				</a>
				<p class="sp-caption">Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
			</div>

			<div class="sp-slide">
				<a href="https://bqworks.net/slider-pro/images2/image8_large.jpg">
					<img class="sp-image" src="../src/css/images/blank.gif" 
						data-src="https://bqworks.net/slider-pro/images2/image8_medium.jpg" 
						data-retina="https://bqworks.net/slider-pro/images2/image8_large.jpg"/>
				</a>
				<p class="sp-caption">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni.</p>
			</div>

			<div class="sp-slide">
				<a href="https://bqworks.net/slider-pro/images2/image9_large.jpg">
					<img class="sp-image" src="../src/css/images/blank.gif" 
						data-src="https://bqworks.net/slider-pro/images2/image9_medium.jpg" 
						data-retina="https://bqworks.net/slider-pro/images2/image9_large.jpg"/>
				</a>
				<p class="sp-caption">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.</p>
			</div>

			<div class="sp-slide">
				<a href="https://bqworks.net/slider-pro/images2/image10_large.jpg">
					<img class="sp-image" src="../src/css/images/blank.gif" 
						data-src="https://bqworks.net/slider-pro/images2/image10_medium.jpg" 
						data-retina="https://bqworks.net/slider-pro/images2/image10_large.jpg"/>
				</a>
				<p class="sp-caption">Sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
			</div>

			<div class="sp-slide">
				<a href="https://bqworks.net/slider-pro/images2/image11_large.jpg">
					<img class="sp-image" src="../src/css/images/blank.gif" 
						data-src="https://bqworks.net/slider-pro/images2/image11_medium.jpg" 
						data-retina="https://bqworks.net/slider-pro/images2/image11_large.jpg"/>
				</a>
				<p class="sp-caption">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni.</p>
			</div>
		</div>
    </div>
    

</body>
</html>